html,
body {
    /* position: relative;
    left: 0;
    top: 0; */
    margin: 0;
    padding: 0;
    width: 640px;
    height: 1030px;
}

#bg {
    position: absolute;
    left: -645px;
    top: 0;
    /* width: 1290px; */
    height: auto;
    width: auto;
    animation: move 10s forwards;
}

#door {
    position: absolute;
    left: -800px;
    top: 0;
    z-index: 2;
    height: 100%;
    animation: doorMove 5s 10s forwards;
}

@keyframes move {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(644px, 0);
    }
}

#font{
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translateX(-50%) translateY(-50%) ;
    z-index: 1;
    width: 750px;
    height: 1300px;
    animation: font 3.5s 1.5s forwards;
}

@keyframes font {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* .wave {
    border-radius: 500px;
    position: absolute;
    top: calc((100% - 50px) / 2);
    left: calc((100% - 50px) / 2);
    width: 50px;
    height: 50px;
    background: url("../imgs/字体.png");
    background-attachment: fixed;
    background-position: 0px 0px;
}

@keyframes w {
    0% {

        top: calc((100% - 50px) / 2);
        left: calc((100% - 50px) / 2);
        width: 50px;
        height: 50px;
    }

    100% {

        top: calc((100% - 500px) / 2);
        left: calc((100% - 500px) / 2);
        width: 500px;
        height: 500px;
    }
}

.wave0 {

    z-index: 2;
    background-size: auto 106%;
    animation: w 2s forwards;
}

.wave1 {

    z-index: 3;
    background-size: auto 102%;
    animation: w 2s 0.2s forwards;
}

.wave2 {
    z-index: 4;
    background-size: auto 104%;
    animation: w 2s 0.8s forwards;
}

.wave3 {
    z-index: 5;
    background-size: auto 101%;
    animation: w 2s 1s forwards;
}

.wave4 {
    z-index: 6;
    background-size: auto 102%;
    animation: w 2s 0.8s forwards;
}

.wave5 {
    border-radius: 500px;
    z-index: 7;
    background-size: auto 100%;
    animation: w 2s .8s forwards;
} */